import * as React from 'react';
import './picker.scss';


function formatValue(value, point) {
    let address  = value.address || [value.province,  value.city === value.province ? null : value.city,  value.district, value.street, value.business].filter(item => item).join('');

    return {
        address: address,
        province: value.province,
        city: value.city,
        district: value.district,
        business: value.business,
        lng: point ? point.lng : 0,
        lat: point ? point.lat : 0,
    }
}

// http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize
// amis ak H1keGu5vIWDTEvPhybxeh7qsrnwRB2Tx
export default class MapPicker extends React.Component {

    static defaultProps = {
        geoLocation: false
    };

    constructor(props) {
        super(props);

        this.onMessage = this.onMessage.bind(this);
        this.handleConfirm = this.handleConfirm.bind(this);

        this.state = {
            value: null,
            tip: '请在位置列表中选择活动地点',
            submited: false
        };
    }

    componentWillMount() {
        window.addEventListener('message', this.onMessage);
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.tip !== nextState.tip) {
            return true;
        }

        return false;
    }

    componentDidUpdate() {
        console.log('Here')
    }

    componentWillUnmount() {
        window.removeEventListener('message', this.onMessage);
    }

    handleConfirm() {
        if (!this.state.value) {
            this.setState({
                tip: '请在位置列表中选择活动地点',
                submited: true
            });
            return;
        }

        this.props.onChange(this.state.value);
        this.props.onRequestClose();
    }

    onMessage(event) {
        const loc = event.data;
        if (!loc || loc.module !== 'locationPicker') {
            return;
        }

        this.setState({
            value: {
                lat: loc.latlng.lat,
                lng: loc.latlng.lng,
                address: loc.poiaddress
            }
        });
    }

    render() {
        let {
            value
        } = this.props;

        value = value || {};

        return (
            <div className="map__picker panel panel-default m-b-none">
                <iframe
                    frameBorder="0"
                    width='100%'
                    height="500"
                    src={`http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp${value && value.lng && value.lat ? `&coord=${value.lng},${value.lat}`: ''}`}
                >
                </iframe>
                <div className="panel-footer">
                    <span className={`pull-left text-${this.state.submited ? 'danger' : 'info'} m-t-xs`}>{this.state.tip}</span>
                    <a className="btn btn-default" onClick={this.props.onRequestClose}>关闭</a>
                    <a className="btn btn-info" onClick={this.handleConfirm} >确定</a>
                </div>
            </div>
        );
    }
}
